import React, { Component } from 'react'

//购物车按钮
import Car from '../car/car.js'
//购物车内容
import ShopCar from '../car/shopCar.js'

import { connect } from "react-redux"
import action from '../../../store/action/index.js'

import Publiclist from './publiclist.js'

import cookies from 'js-cookie'

import "./list.less"
const AMap = window.AMap;
class ChangeCom extends Component {
    state = {
        flag: true,//判断表头用那个
        list_city_name: "",
        shopcarFlag: false,
        spacing: ""
    }
    render() {
        let { listleftdata, listrightdata, storeCommodity, data_types } = this.props
        // console.log(listrightdata);
        let { list_city_name, flag } = this.state
        return (
            <div className="list_box">
                {/* 表头判断是加载本地商铺还是 当前商店 */}
                {
                    flag ?
                        <div className="list_top_box">
                            {/* 修改思路为定位+模糊搜索 */}
                            <div className="list_top_loca">
                                <span className="iconfont icon-dingwei1">{list_city_name}</span>
                            </div>
                            <div className="list_top_input" onClick={() => { this.jumpRouterInput() }}>
                                <input type="text" placeholder="大家都在搜的热点食品" />
                            </div>
                            <div></div>
                        </div>
                        : <div className="store_list_top">
                            {/* 此思路为设置门店列表表头 */}
                            <span className="iconfont icon-fanhui2 store_list_top_span" onClick={() => {
                                // 跳路由
                                this.props.history.push(JSON.parse(sessionStorage.getItem("router")))
                                // console.log(this.props);
                            }} ></span>
                            <h2>
                                {
                                    this.props.collection_store === "1" ? <i className="iconfont icon-shoucang2 store_list_top_collect1" onClick={() => {
                                        // 取消收藏
                                        this.changeStoreCollect()
                                    }}>已收藏</i>
                                        : <i className="iconfont icon-shoucang3 store_list_top_collect" onClick={() => {
                                            // 收藏
                                            this.changeStoreCollect()
                                        }}>收藏</i>
                                }
                                {
                                    this.props.storeMess.length > 0 ?
                                        <span onClick={() => { this.lookStoreDtail() }}>{this.props.storeMess[0].store_mess}</span>
                                        : null
                                }

                                <i className="iconfont icon-fanhui1"></i>
                            </h2>
                            <p>距离您{this.state.spacing}km</p>
                            <p>线上点餐时间：10：00 ~ 5:00</p>
                            <p>线下营业时间：8：30 ~ 20：30</p>
                        </div>
                }

                {/* 底部信息 */}
                {
                    flag ?
                        < Publiclist listLift={listleftdata} listright={listrightdata} />
                        : < Publiclist listLift={data_types} listright={storeCommodity} />
                }

                {/* 购物车 */}
                <Car parentWay={{ ...this }}></Car>

                {/* 购物车内容 */}
                <div className="shopcar">
                    {this.state.shopcarFlag === true ?
                        <div className="shopcar_zz"
                            ref={(shopzz) => { this.shopzz = shopzz }}
                            onTouchStart={() => { this.closeShopCar() }}
                            style={{ position: 'fixed', background: 'rgba(0,0,0,0.5)', width: '100vw', height: '100vh', left: 0, top: 0 }}
                        >

                        </div>
                        : null}
                    {this.state.shopcarFlag === true ?
                        <div
                            ref={(shopcar) => { this.shopcar = shopcar }}
                            className="shop_car"
                        ><ShopCar closeShopCar={this.closeShopCar}></ShopCar></div> : null}
                </div>
            </div>
        )
    }

    componentDidMount() {
        // console.log(JSON.parse(sessionStorage.getItem("flag")));
        if (JSON.parse(sessionStorage.getItem("flag")) === null) {
            console.log(132);
            if (this.state.flag) {
                if (this.props.listleftdata.length === 0) {
                    this.props.getListLeft()
                }
                // 获取右侧内容数据
                if (this.props.listrightdata.length === 0) {
                    this.props.getListRight({
                        number: 2,
                        store_site: ""
                    })
                }
            } else {
                // 加载获取店铺数据
                let { getStoreData } = this.props
                getStoreData({
                    store: JSON.parse(sessionStorage.getItem("store_id")),
                    user_id: cookies.get('user_id')
                })
            }
        } else {
            this.setState({ flag: JSON.parse(sessionStorage.getItem("flag")) }, () => {
                // 获取数据
                if (this.state.flag) {
                    if (this.props.listleftdata.length === 0) {
                        this.props.getListLeft()
                    }
                    // 获取右侧内容数据
                    if (this.props.listrightdata.length === 0) {
                        this.props.getListRight({
                            number: 2,
                            store_site: ""
                        })
                    }
                } else {
                    // 加载获取店铺数据
                    let { getStoreData } = this.props
                    getStoreData({
                        store: JSON.parse(sessionStorage.getItem("store_id")),
                        user_id: cookies.get('user_id')
                    })
                }
            })
        }





        this.props.getCarData({
            user_id: cookies.get('user_id')
        })

        // 实现实时定位
        var map = new AMap.Map('container', {
            resizeEnable: true
        });

        let that = this
        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 1000,          //超过10秒后停止定位，默认：5s
                buttonPosition: 'RB',    //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition(function (status, result) {
                // console.log(result);
                if (status === "complete") {
                    that.setState({ list_city_name: result.addressComponent.province })
                }

            });
        });
    }


    //打开购物车
    openShopCar = (res) => {
        this.setState({ shopcarFlag: res }, () => {
            setTimeout(() => {
                this.shopzz.style.opacity = 1
                this.shopcar.style.bottom = 0
            }, 250);
        })
    }
    //关闭购物车
    closeShopCar = () => {
        this.shopcar.style.bottom = -100 + '%'
        this.shopzz.style.opacity = 0

        setTimeout(() => {
            this.setState({ shopcarFlag: false })
        }, 250);

    }

    // 收藏调接口
    changeStoreCollect = () => {
        this.props.changeStoreCollect({
            store_id: this.props.storeMess[0].store_id,
            user_id: cookies.get('user_id')
        })
    }

    // 查看店铺详情
    lookStoreDtail = () => {
        this.props.history.push('/store_detail')
    }


    // juli = () => {
    //     // let store_site = JSON.parse(localStorage.getItem("store_site")).split(",")
    //     // let list_personal_locator = JSON.parse(localStorage.getItem("list_personal_locator"))
    //     // var dis = AMap.GeometryUtil.distance(store_site, list_personal_locator);
    //     // this.setState({ spacing: (dis / 1000).toFixed(2) })
    // }

    jumpRouterInput = () => {
        // 条搜索框
        this.props.history.push('/search')

    }

    componentWillUnmount() {
        this.setState = () => false;
    }

}

export default connect(state => state.foodf, action.foodf)(ChangeCom)
